<!--基础信息-->
<div>
  <h3>基础信息</h3>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="insideTitle"><span>*</span>内部标题</label>
      <input id="insideTitle" [disabled]="disabled" [(ngModel)]="form.insideTitle" maxlength="50" placeholder="请输入内部标题"
             nz-input>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="messageType"><span>*</span>消息类型</label>
      <nz-radio-group id="messageType" [disabled]="disabled" [(ngModel)]="form.messageType">
        <label nz-radio [nzValue]="0">活动优惠</label>
        <label nz-radio [nzValue]="1">系统消息</label>
      </nz-radio-group>
    </nz-col>
  </nz-row>
  <!-- <nz-row class="row">
    <nz-col nzSpan="24">
      <label><span>*</span>适用终端</label>
      <nz-select
        style="width: 400px;"
        nzShowSearch
        nzAllowClear
        nzMode="multiple"
        [nzMaxTagCount]="1"
        [nzDisabled]="disabled"
        nzPlaceHolder="请选择适用终端"
        [(ngModel)]="applyTerminalSelected">
        <nz-option
          *ngFor="let option of applyTerminalOptions"
          [nzLabel]="option.name"
          [nzValue]="option.content"
        ></nz-option>
      </nz-select>
    </nz-col>
  </nz-row> -->
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="belong"><span>*</span>所属业务</label>
      <nz-radio-group id="belong" [disabled]="disabled" [(ngModel)]="form.belong">
        <label nz-radio nzValue="0">无</label>
        <label nz-radio [nzValue]="item['content']" *ngFor="let item of belongOptions">{{item['name']}}</label>
      </nz-radio-group>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="sendTimeType" style="align-self: flex-start"><span>*</span>发送时间</label>
      <nz-radio-group id="sendTimeType" [disabled]="disabled" [(ngModel)]="form.sendTimeType">
        <label style="display: block" class="m-b-8" nz-radio [nzValue]="1">审核通过后立即发送</label>
        <label style="display: block" class="m-b-8" nz-radio [nzValue]="2">
          定时发送
          <nz-date-picker
            [disabled]="form.sendTimeType!=2||disabled"
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="form.setSendDateTime"
            [nzDisabledDate]="disabledDate"
            nzShowTime
          ></nz-date-picker>
          <i
            style="align-self: flex-end;margin-left: 6px"
            nz-icon
            nzTheme="outline"
            nzType="info-circle"
            nzTooltipTitle="如果定时发送时间小于审核通过时间则审核通过后会立即发送。"
            nzTooltipPlacement="right"
            nz-tooltip>
          </i>
        </label>
        <label style="display: block" nz-radio [nzValue]="3">
          登录后发送
          <nz-date-picker
            [disabled]="form.sendTimeType!=3||disabled"
            [nzDisabledDate]="loginDisabledStartDate"
            nzShowTime
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="form.loginStartTime"
            nzPlaceHolder="登录时间限制"
          ></nz-date-picker>
          <span class="p-l-8 p-r-8">~</span>
          <nz-date-picker
            #endDatePicker
            [disabled]="form.sendTimeType!=3||disabled"
            [nzDisabledDate]="loginDisabledEndDate"
            nzShowTime
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="form.loginEndTime"
            nzPlaceHolder="登录时间限制"
          ></nz-date-picker>
          <i
            style="align-self: flex-end;margin-left: 6px"
            nz-icon
            nzTheme="outline"
            nzType="info-circle"
            nzTooltipTitle="审核通过以后,时间内的用户登录的时候,如果没有发送过就会进行发送."
            nzTooltipPlacement="right"
            nz-tooltip>
          </i>
        </label>
      </nz-radio-group>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="title">标题</label>
      <input id="title" nz-input placeholder="请输入标题" maxlength="50" [disabled]="disabled" [(ngModel)]="form.title"/>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="abstract" style="align-self: flex-start">摘要</label>
      <textarea id="abstract" nz-input placeholder="请输入摘要" maxlength="100" [disabled]="disabled"
                [(ngModel)]="form.abstract"></textarea>
    </nz-col>
  </nz-row>
  <!-- <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="link"><span>*</span>链接</label>
      <input id="link" nz-input placeholder="请输入链接" maxlength="128" [disabled]="disabled" [(ngModel)]="form.link"/>
      <i style="align-self: flex-end;margin-bottom: 7px;margin-left: 4px" nz-icon nzTheme="outline" nzType="info-circle"
         nzTooltipTitle="如果链接为空则消息点击后无法跳转。"
         nzTooltipPlacement="right" nz-tooltip></i>
    </nz-col>
  </nz-row> -->
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label>链接</label>
      <nz-select
        style="width: 400px;"
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="请选择链接"
        [(ngModel)]="form.url"
        [nzDisabled]="disabled"
      >
        <ng-container *ngFor="let option of mappingOptions">
          <nz-option
            [nzLabel]="option.name"
            [nzValue]="option.key"
          ></nz-option>
        </ng-container>
      </nz-select>
      <p *ngIf="form.url" class="mapping-remark">{{ remarkFilter(form.url) }}</p>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label>参数</label>
      <input
        nz-input
        placeholder="请输入参数，多个参数用@符号隔开"
        [(ngModel)]="form.params"
        [disabled]="disabled"
      />
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="expirationTime"><span>*</span>过期时间</label>
      <nz-date-picker [disabled]="disabled"
                      id="expirationTime"
                      nzShowTime
                      nzFormat="yyyy-MM-dd HH:mm:ss"
                      ngModel
                      [(ngModel)]="form.expirationTime"
      ></nz-date-picker>
      <i style="align-self: flex-end;margin-bottom: 7px;margin-left: 4px" nz-icon nzTheme="outline" nzType="info-circle"
         nzTooltipTitle="到达过期时间以后用户将看不到该消息，常用于有期限的活动消息。"
         nzTooltipPlacement="right" nz-tooltip></i>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="image" style="align-self: flex-start">图片</label>
      <nz-upload *ngIf="!disabled"
                 id="image"
                 style="max-width: 120px"
                 class="avatar-uploader"
                 [(nzFileList)]="imageList"
                 nzListType="picture-card"
                 [nzShowUploadList]="false"
                 [nzBeforeUpload]="beforeUpload"
                 nzAccept="image/*"
      >
        <ng-container *ngIf="!previewImg">
          <!--      <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>-->
          <i class="upload-icon" nz-icon [nzType]="'plus'"></i>
        </ng-container>
        <img *ngIf="previewImg" [src]="previewImg" style="width: 100%;max-height: 102px"/>
      </nz-upload>
      <div style="color: #999999" *ngIf="!disabled">
        <div>建议上传 632 * 216 或等比例的图片</div>
        <div>也可以上传宽度为632的图片，但是显示效果可能较差</div>
      </div>
      <img *ngIf="previewImg&&disabled"
           nz-image
           style="max-width: 120px;max-height: 120px"
           [nzSrc]="previewImg"
           alt=""
      />
    </nz-col>
  </nz-row>
</div>
<!--发放人群-->
<div>
  <h3>发放人群</h3>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="userId">用户ID</label>
      <input id="userId" [disabled]="disabled" [(ngModel)]="sendUserForm.userId" maxlength="1000"
             placeholder="请输入用户ID 多个用英文逗号分隔"
             (keyup.enter)="addComma(sendUserForm,'userId')" nz-input>
      <i style="align-self: flex-end;margin-bottom: 7px;margin-left: 4px" nz-icon nzTheme="outline" nzType="info-circle"
         nzTooltipTitle="点击回车可以自动添加逗号"
         nzTooltipPlacement="right" nz-tooltip></i>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="userTel">手机号</label>
      <input id="userTel" [disabled]="disabled" [(ngModel)]="sendUserForm.userTel" maxlength="1000"
             placeholder="请输入用户手机号 多个用英文逗号分隔"
             (keyup.enter)="addComma(sendUserForm,'userTel')" nz-input>
      <i style="align-self: flex-end;margin-bottom: 7px;margin-left: 4px" nz-icon nzTheme="outline" nzType="info-circle"
         nzTooltipTitle="点击回车可以自动添加逗号"
         nzTooltipPlacement="right" nz-tooltip></i>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="userInitialStatus">用户初始身份</label>
      <nz-radio-group id="userInitialStatus" [disabled]="disabled" [(ngModel)]="sendUserForm.userInitialStatus">
        <label nz-radio [nzValue]="3">不限</label>
        <label nz-radio [nzValue]="2">B端</label>
        <label nz-radio [nzValue]="1">C端</label>
      </nz-radio-group>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="userReallyStatus">用户实际身份</label>
      <nz-radio-group id="userReallyStatus" [disabled]="disabled" [(ngModel)]="sendUserForm.userReallyStatus">
        <label nz-radio [nzValue]="3">不限</label>
        <label nz-radio [nzValue]="2">B端</label>
        <label nz-radio [nzValue]="1">C端</label>
      </nz-radio-group>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="registerTimeRange">注册时间</label>
      <nz-date-picker id="registerTimeRange" [disabled]="disabled"
                      [nzDisabledDate]="disabledStartDateRegister"
                      nzShowTime
                      nzFormat="yyyy-MM-dd HH:mm:ss"
                      [(ngModel)]="sendUserForm.startValueRegister"
                      nzPlaceHolder="开始时间"
      ></nz-date-picker>
      <span style="margin: 0 8px">~</span>
      <nz-date-picker [disabled]="disabled"
                      [nzDisabledDate]="disabledEndDateRegister"
                      nzShowTime
                      nzFormat="yyyy-MM-dd HH:mm:ss"
                      [(ngModel)]="sendUserForm.endValueRegister"
                      nzPlaceHolder="结束时间"
      ></nz-date-picker>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label for="checkTimeRange">审核通过时间</label>
      <nz-date-picker id="checkTimeRange" [disabled]="disabled"
                      [nzDisabledDate]="disabledStartDateChecked"
                      nzShowTime
                      nzFormat="yyyy-MM-dd HH:mm:ss"
                      [(ngModel)]="sendUserForm.startValueChecked"
                      nzPlaceHolder="开始时间"
      ></nz-date-picker>
      <span style="margin: 0 8px">~</span>
      <nz-date-picker [disabled]="disabled"
                      [nzDisabledDate]="disabledEndDateChecked"
                      nzShowTime
                      nzFormat="yyyy-MM-dd HH:mm:ss"
                      [(ngModel)]="sendUserForm.endValueChecked"
                      nzPlaceHolder="结束时间"
      ></nz-date-picker>
    </nz-col>
  </nz-row>
  <nz-row class="row">
    <nz-col nzSpan="24">
      <label></label>
      <a style="color: #409EFF;margin-right: 8px" (click)="calcUsers()" *ngIf="!disabled">计算人数</a>
      <span *ngIf="sendUserForm.countUser">符合条件的用户共&nbsp;{{sendUserForm.countUser}}&nbsp;人</span>
      <span *ngIf="sendUserForm.countUser" style="color: rgba(0,0,0,0.2)">（该人数可能在实际发送的时候有误差）</span>
    </nz-col>
  </nz-row>
</div>
<nz-row class="row" style="margin-top: 48px">
  <nz-col nzSpan="24">
    <label></label>
    <button nz-button nzType="primary"
            *ngIf="customerManageService.computedColor(this.emailDataStatus).btn.has('edit')&&!disabled&&permission.userPermission.has('customer-manage:email-manage:add')"
            [nzLoading]="saveLoading"
            style="margin-right: 24px" (click)="save()">保存
    </button>
    <button nz-button nzType="primary"
            *ngIf="customerManageService.computedColor(this.emailDataStatus).btn.has('check')&&permission.userPermission.has('customer-manage:email-manage:check')"
            style="margin-right: 24px" (click)="checkModalShow()">审核
    </button>
    <button nz-button nzType="primary"
            *ngIf="customerManageService.computedColor(this.emailDataStatus).btn.has('submitCheck')&&permission.userPermission.has('customer-manage:email-manage:submitCheck')"
            (click)="submitCheck()">提交审核
    </button>
  </nz-col>
</nz-row>

<!--审核模态框-->
<nz-modal [(nzVisible)]="checkModal.visible" nzTitle="审核" (nzOnCancel)="checkModalHide()">
  <div *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" style="text-align: left">
        <label for="cancelRemark">审核意见:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <textarea id="cancelRemark" rows="4" nz-input placeholder="请输入备注"
                  [(ngModel)]="checkModal.remark"></textarea>
      </nz-col>
    </nz-row>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="primary" nzDanger (click)="checkReject()" [nzLoading]="checkModal.loading">拒绝</button>
    <button nz-button nzType="primary" (click)="checkResolve()" [nzLoading]="checkModal.loading">通过</button>
  </div>
</nz-modal>

